<template>
	<view class="count-box" :class="status ? 'count-box-light' : 'count-box-gray'">
		<view class="count-less count-pub" :class="[myValue <= min ? 'light' : 'gray']" @tap.stop="less"
			@longpress='longpressLess' @touchend="handletouchend">-</view>
		<view class="count-add count-pub" :class="[myValue >= max ? 'light' : 'gray']" @tap.stop="add"
			@longpress='longpressAdd' @touchend="handletouchend">+</view>
		<input type="number" v-model="myValue" @focus="onFocus" @blur="onBlue" class="count-input" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			myValue: 0,
			status: false,
			timer: null
		}
	},
	props: {
		// 计数器中的值
		value: {
			type: Number,
			default: 0
		},
		max: {
			type: Number,
			default: 10000
		},
		min: {
			type: Number,
			default: 0
		},
		// 点击当前数据的索引
		index: {
			type: Number
		},
		delayed: {
			type: Number,
			default: 200
		}
	},
	created() {
		this.myValue = this.value
	},
	watch: {
		value(val) {
			this.myValue = val
		}
	},
	methods: {
		onBlue() {
			if (+this.myValue >= this.max) {
				this.myValue = this.max
				this.status = false
			} else if (+this.myValue <= this.min) {
				this.myValue = this.min
				this.status = false
			} else {
				this.status = true
				this.myValue = +this.myValue
			}
			if (!isNaN(this.myValue)) {
				this.$emit('handleCount', this.myValue, this.index)
			} else {
				this.$emit('handleCount', 0, this.index)
			}

		},
		onFocus() {
			this.status = true
		},
		add() {
			this.addPublick()
		},
		addPublick() {
			if (this.myValue >= this.max) {
				this.status = false
				this.myValue = this.max
				clearInterval(this.timer)
			} else {
				this.status = true
				this.myValue++
			}
			this.$emit('handleCount', this.myValue, this.index)
		},
		longpressAdd() {
			this.timer = setInterval(() => {
				this.addPublick()
			}, this.delayed)
		},
		less() {
			this.lessPublick()
		},
		lessPublick() {
			if (this.myValue <= this.min) {
				clearInterval(this.timer)
				this.status = false
				this.myValue = this.min
			} else {
				this.status = true
				this.myValue--
			}
			this.$emit('handleCount', this.myValue, this.index)
		},
		longpressLess() {
			this.timer = setInterval(() => {
				this.lessPublick()
			}, this.delayed)
		},
		handletouchend() {
			clearInterval(this.timer)
		}
	}
}
</script>
<style>
.gray {
	background: #fff;
	color: #2B0303;

}

.light {
	background: #fff;
	color: #2B0303;

}

.count-box {
	position: relative;
	width: 220rpx;
	height: 40rpx;
	border-radius: 5px;
	z-index: 1;
	transition: all .3s;
}

.count-box-light {
	/* border: 1px solid #add4ff; */
}

.count-box-gray {
	/* border: 1px solid #e4e4e4; */
}

.count-pub {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	width: 60rpx;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50rpx !important;
}

.count-less {
	left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.count-add {
	right: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.count-input {
	margin-top: 5rpx;
	width: 110rpx;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 6rpx 10rpx;
	box-sizing: border-box;
	color: #000;
	font-size: 26rpx;
	text-align: center;
	background-color: #E8E8E8;
	border-radius: 60rpx;
}
</style>
